<template>
  <div class="index">
    <van-tabs v-model="active">
      <van-tab
        v-for="channels in channel"
        :key="channels.id"
        :title="channels.name"
      >
        <!-- <div class="scroll-wrapper">

          频道内容 {{ channels.name }}
          <p
            v-for="idx in 20"
            :key="idx"
          >
            第{{idx}}篇文章
          </p>
        </div> -->
        <article-list :channel="channels"></article-list>
      </van-tab>
    </van-tabs>
    <div
      class="click-btn"
      @click="sheetShow = true"
      v-if="$store.getters.isLogin"
    >
      <van-icon name="wap-nav" />
    </div>
    <!-- 频道编辑部分 -->
    <van-action-sheet v-model="sheetShow">
      <channel-edit
        @sub-active="hSubActive"
        :channel="this.channel"
        :activeId="active"
        @channel-active="hActiveChange"
      ></channel-edit>
    </van-action-sheet>
  </div>
</template>
<script>
import { getChannel } from '../../api/channel.js'
import ArticleList from './articleList.vue'
import channelEdit from './channelEdit.vue'
export default {
  data () {
    return {
      sheetShow: false,
      active: 0,
      channel: []
    }
  },
  components: {
    ArticleList,
    channelEdit
  },
  created () {
    this.getMyChannel()
  },
  methods: {
    hSubActive () {
      this.active--
    },
    // 获取用户的频道
    async getMyChannel () {
      try {
        const res = await getChannel()
        console.log(res)
        this.channel = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // 频道编辑页面点击频道跳转对应频道并关闭频道编辑
    hActiveChange (channel) {
      this.active = channel
      this.sheetShow = false
    }
  }
}
</script>
